<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KCCC App Management</title>
  
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />


<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript" src="js/i18n/jquery.ui.datepicker-vi.js"></script>
<script type="text/javascript" src="themes/jquery.themeswitcher.js"></script>
<script src="js/popupimport.js" type="text/javascript"></script>
<script src="js/autocomplete.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
</script>
<script src="js/ui.multiselectbase.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/export.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ocupload.js"></script>
<script type="text/javascript" src="js/jquery.ocupload-min.js"></script>
<script type="text/javascript" src="js/uploadimport.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){
	/*$("#logout_link").click(function(){
		$.removeCookie('the_cookie');
		$.removeCookie('the_cookie_role');
		window.location = 'login.html';
	});
	var cookieValue = $.cookie('the_cookie');
	var cookieRole = $.cookie('the_cookie_role');
	if((cookieValue == null) || ((cookieRole != 1) && (cookieRole != 2))){
		window.location = 'login.html';
	}
	else{
		$("#results").text(cookieValue);
	}*/
    $('#switcher').themeswitcher({
    	imgpath: "themes/images/",
    	jqueryUiVersion: "1.8.23"
    });

	$('body').layout({
		resizerClass: 'ui-state-default',
        west__onresize: function (pane, $Pane) {
            jQuery("#west-grid").jqGrid('setGridWidth',$Pane.innerWidth()-2);
		}
	});
	$.jgrid.defaults = $.extend($.jgrid.defaults,{loadui:"enable"});
	var maintab =jQuery('#tabs','#RightPane').tabs({
        add: function(e, ui) {
            // append close thingy
            $(ui.tab).parents('li:first')
                .append('<span class="ui-tabs-close ui-icon ui-icon-close" title="Close Tab"></span>')
                .find('span.ui-tabs-close')
                .click(function() {
                    maintab.tabs('remove', $('li', maintab).index($(this).parents('li:first')[0]));
                });
            // select just added tab
            maintab.tabs('select', '#' + ui.panel.id);
        }/*,
        select: function(event, ui) {
            $(ui.tab).click(function() {
            	maintab.tabs("load",$(this).index());
                return true;
            });
        }*/
    });
    jQuery("#west-grid").jqGrid({
        url: "/tree.xml",
        datatype: "xml",
        height: "auto",
        pager: false,
        loadui: "disable",
        colNames: ["id","Danh Mục","url"],
        colModel: [
            {name: "id",width:1,hidden:true, key:true},
            {name: "menu", width:150, resizable: false, sortable:false},
            {name: "url",width:1,hidden:true}
        ],
        treeGrid: true,
		caption: "Quản Lý",
        ExpandColumn: "menu",
        autowidth: true,
        //width: 180,
        rowNum: 200,
        ExpandColClick: true,
        treeIcons: {leaf:'ui-icon-document-b'},
        onSelectRow: function(rowid) {
            var treedata = $("#west-grid").jqGrid('getRowData',rowid);
            //if(cookieRole == 1){
            	if((treedata.isLeaf=="true")) {
                    //treedata.url
                    var st = "#t"+treedata.id;
    				if($(st).html() != null ) {
    					maintab.tabs('select',st);
    				} else {
    					maintab.tabs('add',st, treedata.menu);
    					$(st,"#tabs").load(treedata.url);
    				}
                }
           // }
            /*else if(cookieRole == 2){
            	if((treedata.isLeaf=="true")&& (rowid!=25)) {
                    //treedata.url
                    var st = "#t"+treedata.id;
    				if($(st).html() != null ) {
    					maintab.tabs('select',st);
    				} else {
    					maintab.tabs('add',st, treedata.menu);
    					$(st,"#tabs").load(treedata.url);
    				}
                }
            }*/
            
        }
    });
	
// end splitter
});
</script>
<style>
html, body {
	margin: 0;			/* Remove body margin/padding */
	padding: 0;
	overflow: hidden;	/* Remove scroll bars on browser window */	
    font-size: 80%;
}
/*Splitter style */


#LeftPane {
	/* optional, initial splitbar position */
	overflow: auto;
}
/*
 * Right-side element of the splitter.
*/

#RightPane {
	padding: 2px;
	overflow: auto;
}
/*Tab content */
#tabs{
	float: left;
	/*width: 100%;*/
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}

/*date picker*/
.ui-datepicker {z-index:1200;}
.ui-datepicker select.ui-datepicker-month { width: 60%;}
.ui-datepicker select.ui-datepicker-year { width: 40%;}

/*edit form*/
input.FormElement {
  vertical-align:middle;
}
</style>
</head>
<body>
  	<div id="LeftPane" class="ui-layout-west ui-widget ui-widget-content">
		<table id="west-grid"></table>
		<div id="login_location" class="ui-layout-west ui-widget ui-widget-content">
			<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" style="height: 24px;">
				<span class="ui-jqgrid-title" style="text-align: center;">Tài Khoản</span>
			</div>
			<p style="padding-left: 5px;"><b>Tài khoản: </b> <span id="results"></span></p>
			<a style="padding-left: 5px;" id="logout_link" href="#">Đăng Xuất</a>
			<br />
			<br />
		</div>
		<div id="switcher"></div>
	</div> <!-- #LeftPane -->
	<div id="RightPane" class="ui-layout-center ui-helper-reset ui-widget-content" ><!-- Tabs pane -->
	    <form id="formstyle" action="" method="post" name="formstyle">
			<input type="hidden" name="pdfBuffer" id="pdfBuffer" value="" /> 
			<input type="hidden" name="fileName" id="fileName" value="" /> 
			<input type="hidden" name="fileType" id="fileType" value="" />
		</form>
		<div id="tabs" class="jqgtabs">
			<ul>
				<li><a href="#tabs-1">Thông Báo</a></li>
			</ul>
			<div id="tabs-1" style="font-size:12px; width: 1000px;"> Chưa có gì để thông báo!<br/>
			<br/>
			Thanks!
			</div>
		</div>
	</div> <!-- #RightPane -->
</body>
</html>